<%@ include file="/common/taglibs.jsp"%>


<head>
    <title><fmt:message key="roleDetail.title"/></title>
    <meta name="heading" content="<fmt:message key='roleDetail.heading'/>"/>
</head>
                            
   
   
        <form:form method="post" modelAttribute="cpaModel" id="cpaForm">

             <form:select path="cpaList[0].role.id" id="roleSelect">
                <form:option value="0" label="Select" />
                <form:options items="${model.roles}" itemValue="id" itemLabel="name" />
            </form:select>
            <br />
            <br />
            <table border="1">
                <tr>
                    <td></td>
                    <c:forEach var="perms" items="${model.permissions}">
                        <td>
                            ${perms.name}
                        </td>
                    </c:forEach>
                </tr>
                <c:forEach var="item" items="${model.items}" varStatus="status">
                    <tr>
                        <td>
                            ${item.title}                         
                            <form:hidden path="cpaList[${status.count-1}].code" value="" class="code" id="${status.count}"></form:hidden>
                        </td>
                        <c:forEach var="perms" items="${model.permissions}">
                            <td>
                                <input type="checkbox" class="cb${status.count}"/>
                            </td>
                        </c:forEach>
                    </tr>
                </c:forEach>
            </table>
             <button id="submitBtn">Create</button>
        </form:form>


        




        <script>

            jQuery(document).ready(function() {
                  

                $('submitBtn').observe('click', function () {


                  codeFields = $$('.code');
                  console.log(codeFields);

                  codeFields.each(function(e){
                     e.setAttribute('value', '');
                     row = e.readAttribute('id');
                     var cbRowClass = ".cb" + row;
                      cbRow = $$(cbRowClass);

                      cbRow.each(function(el) {
                            temp = e.readAttribute('value');

                            if(el.checked) {
                                temp += "1";
                            }
                            else {
                                temp += "0";
                            }
                            e.setAttribute('value', temp);
                      });
                      console.log(cbRow);
                  });





              
                });
                
                jQuery("#roleSelect").change(function() {












                   
                    var form = $('cpaForm');
                    checkboxes = form.getInputs('checkbox');
                    checkboxes.each(function(e){ e.checked = 0 });

                    
                   var roleId =  jQuery("OPTION:selected", this).val();
                

                   <c:forEach var="cpa" items="${model.cpa}" varStatus="cpaCount">
                        console.log("cpaCount od foreach" + ${cpaCount.count});
                        console.log(${model.permStrings[cpaCount.count-1]});

                       if (${cpa.role.id} == roleId) {

                           permString = "";                         
                           permString = "${model.permStrings[cpaCount.count-1]}";
                           permString = permString.toString();
              
                           var itemRow = ${cpa.item.id};
                           var finalRow = 0;

                           console.log("treba da checkiram red so id: " + itemRow);


                           <c:forEach var="item" items="${model.items}" varStatus="itemCount">
                               console.log("redot so koj shto sporeduvam e : " + ${item.id});
                                if(${item.id} == itemRow) {
                                    finalRow = ${itemCount.count};
                                }
                           </c:forEach>
                            console.log("finalRow posle e: " + finalRow);
                           var string = ".cb" + finalRow;
                           
                           cb = $$(string);
                           for (var i = 0; i < cb.length; i++) {
                               if (permString.charAt(i) == '1') {
                                   cb[i].checked = 1;
                               }
                           }

                       }


                   </c:forEach>





                });
            });
        </script>